<template>
	<slot></slot>
	<wd-toast />
	<wd-notify />
	<wd-message-box></wd-message-box>
	<im-portant-toast></im-portant-toast>
	<wd-popup v-model="authPopup" position="bottom" custom-style="border-radius: 25rpx 25rpx 0 0;" @close="handleClose"
		:safe-area-inset-bottom="true">
		<view class="body">
			<view class="title">
				<image class="icon" src="@/static/logo.png"></image>
				{{ appBaseInfo.appName }}
			</view>
			<view class="desc">请您允许授权手机号，方便我们帮您注册账号</view>
			<view class="footer">
				<wd-button type="success" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
					custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100">允许授权</wd-button>

			</view>
		</view>
	</wd-popup>
</template>

<script>
	import {
		defineComponent,
		nextTick,
		onMounted,
		onUpdated,
		ref
	} from 'vue';
	import {
		onShow,
	} from '@dcloudio/uni-app';
	import {
		useToast,
	} from '@/uni_modules/wot-design-uni'
	import {
		useNotify
	} from '@/uni_modules/wot-design-uni/components/wd-notify'
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni'

	import useWdToast from "@/hooks/useWdToast.ts";
	import useStatusHeight from '@/hooks/useStatusHeight';
	import {
		useUserStore
	} from "@/store"
	import useRouter from '../../hooks/useRouter';
	export default defineComponent({
		name: 'App',
		components: {},
		props: {

		},
		setup(props, ctx) {
			const router = useRouter();
			const authPopup = ref(false);
			const statusHeight = useStatusHeight(); // 状态栏高度，用于计算toast距离顶部的距离
			const userStore = useUserStore(); // 用户信息存储，用于存储用户信息。

			const page = getCurrentPages();
			const message = useMessage()
			const toast = useToast(); // 注册全局弹框组件，用于全局提示信息展示。
			const notify = useNotify()
			uni.$wdToast.init(page[page.length - 1].route, {
				appToast: toast,
				appNotify: notify,
				appMessage: message,
			}); // 初始化全局弹框组件，用于全局提示信息展示。
			const appBaseInfo = uni.getAppBaseInfo();
			const openid = ref(null)
			onShow(() => {
				console.log()
				if (!userStore.token && page[page.length - 1].route != 'commonPage/register/register' &&
					page[page.length - 1].route != 'commonPage/login/login') {
					userStore.wxLogin();
				}

			})
			const getphonenumber = async (e) => {
				if (e.errMsg === 'getPhoneNumber:fail user deny') {
					userStore.setIsWxLogining(false);
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: async (loginRes) => {
						let res = await userStore.wxPhone({
							code: loginRes.code,
							encryptedData: e.encryptedData, // 授权弹框的openid。
							iv: e.iv,
						});
						handleClose();
						router.push({
							url: "/commonPage/register/register",
							params: {
								openid: openid.value,
								phone: res.phone,
								step: 2,
							},
						});

						// res = await userStore.wxSaveInfo({
						// 	openid: openid.value,
						// 	phone: res.phone,
						// 	yzm: '123456',
						// 	password: '123456',
						// 	repassword: '123456',
						// });
						// userStore.setToken(res.token, res.user_id);
						// userStore.isWxLogining = false;
						// handleClose();
						// uni.pageReLoad();


					}
				});

			}
			const showAuthPopup = (wxopenid) => {
				console.log(wxopenid)
				if (wxopenid) {
					openid.value = wxopenid; // 设置授权弹框的openid。
				}
				authPopup.value = true; // 显示授权弹框，用于授权提示信息展示。
			};
			uni.pageReLoad = () => {
				// 声明一个pages使用getCurrentPages方法
				const curPage = page[page.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
			}
			uni.showAuthPopup = (openid) => {
				showAuthPopup(openid);
			}; // 注册全局弹框组件，用于全局提示信息展示。
			const handleClose = () => {
				authPopup.value = false; // 关闭授权弹框，用于授权提示信息展示。
				userStore.setIsWxLogining(false);
			}
			return {
				statusHeight,
				authPopup,
				showAuthPopup,
				handleClose,
				appBaseInfo,
				getphonenumber,
			}
		}
	});
</script>

<style lang="less" scoped>
	.body {
		padding: 20rpx 24rpx; // 设置底部按钮的间距。

		.title {
			font-size: 36rpx; // 设置标题字体大小。
			font-weight: bold; // 设置标题字体粗细。
			margin-bottom: 12px; // 设置标题与描述之间的间距。
			display: flex; // 设置标题的布局方式为flex，以便实现两列布局。
			align-items: center; // 设置标题的垂直居中对齐方式。

			.icon {
				width: 60rpx; // 设置图标宽度。
				height: 60rpx; // 设置图标高度。
				margin-right: 12px; // 设置图标与标题之间的间距。

			}
		}

		.desc {
			font-size: 28rpx; // 设置描述字体大小。
			margin-bottom: 12px; // 设置标题与描述之间的间距。
		}

		.footer {
			display: flex; // 设置底部按钮的布局方式为flex，以便实现两列布局。
			justify-content: space-between; // 设置底部按钮的间距。


			.btn {
				width: 45% !important; // 设置按钮的宽度为40%。
			}
		}
	}
</style>